<template>
  <ContainerGroup>
    <Container>
      <div class="ck-filter-form" :style="{ height: containerHeight }">
        <div ref="input-container" class="form-item-container">
          <div class="form-item">
            <span class="form-item-label">院区：</span>
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择院区"
              size="mini"
              style="width: 180px"
              filterable
              @change="changeHospital"
            >
              <el-option
                v-for="item in ruleFormSelect.regionoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">床位类型：</span>
            <el-select
              v-model="ruleForm.bedType"
              placeholder="请选择床位类型"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="changeBedType"
            >
              <el-option
                v-for="item in ruleFormSelect.bedTypeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">床位状态：</span>
            <el-select
              v-model="ruleForm.bedStatus"
              placeholder="请选择床位状态"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="changeBedStatus"
            >
              <el-option
                v-for="item in ruleFormSelect.bedStatusoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">科室：</span>
            <el-select
              v-model="ruleForm.deptCode"
              placeholder="请选择科室"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="deptChange"
            >
              <el-option
                v-for="item in ruleFormSelect.deptCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="form-item">
            <span class="form-item-label">病区：</span>
            <el-select
              v-model="ruleForm.nurseCellCode"
              placeholder="请选择病区"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="nurseCellChange"
            >
              <el-option
                v-for="item in ruleFormSelect.nurseCellCodeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="right-btn-container">
          <div
            v-for="(item, index) in buttonList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
            >{{ item.label }}</Button>
          </div>
          <span
            v-show="showCloseAndOpen"
            class="more-text"
            @click="openAndCloseFilterForm"
          >{{ openOrCloseText }}</span>
        </div>
      </div>
    </Container>
    <Container height="fill" :scroll-y="true" class="container-con" style="padding:10px 0px">
      <div
        v-loading="warploading"
        style="width: 100%; height: calc(100% - 50px)"
      >
        <Empty v-if="alldata.length === 0" style="margin: 20px auto" />
        <div class="department-box">
          <div
            v-for="(item, index) in alldata"
            :key="index"
            class="ment"
            @click="eimitData(item)"
          >
            <div class="ment-title">
              {{ item.areaName }}({{ item.deptName }})
            </div>
            <div class="ment-content">
              <span>床位总数 {{ item.bedsCount }} </span>
              <el-tooltip class="item" effect="dark" :content="'床位使用率：' + item.usedBedsCountDouble + '%'" placement="top-end">
                <el-progress
                  :text-inside="true"
                  :stroke-width="16"
                  class="progress"
                  :percentage="item.usedBedsCountDouble"
                />

              </el-tooltip>
            </div>
            <div class="ment-details">
              <!-- 非集管 -->
              <div
                v-if="
                  bedType[0] === '0' ||
                    bedType.length === 2 ||
                    bedType.length === 0
                "
                style="width: 50%; border-right: 1px solid #e5e5e5"
              >
                <div class="letuer-title" style="color: #888888">
                  <span style="color: #888888">非集管床位</span>
                  <span
                    style="
                          margin-left: 10px;
                          display: inline-block;
                          color: #888888;
                        "
                  >{{ item.noFocusManager }}</span>
                </div>
                <div class="letuer-content">
                  <div class="letuer-square" style="color: #888888">
                    空床
                  </div>
                  <div class="letuer-square">
                    <div class="square-color-one" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.manEmptyBedsCount1 }}
                    </div>
                  </div>
                  <div class="letuer-square">
                    <div class="square-color-two" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.womanEmptyBedsCount1 }}
                    </div>
                  </div>
                  <div class="letuer-square">
                    <div class="square-color-three" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.unknownEmptyBedsCount1 }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 集管 -->
              <div
                v-if="
                  bedType[0] === '1' ||
                    bedType.length === 2 ||
                    bedType.length === 0
                "
                style="width: 50%"
              >
                <div class="letuer-title">
                  <span style="color: #888888">集管床位</span>
                  <span style="margin-left: 10px; display: inline-block">{{
                    item.focusManager
                  }}</span>
                  <span style="color: #888888">
                    已预约 {{ item.registerBedCount }}</span>
                </div>
                <div class="letuer-content">
                  <span
                    class="letuer-square"
                    style="color: #888888"
                  >空床</span>
                  <div class="letuer-square">
                    <div class="square-color-one" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.manEmptyBedsCount }}
                    </div>
                  </div>
                  <div class="letuer-square">
                    <div class="square-color-two" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.womanEmptyBedsCount }}
                    </div>
                  </div>
                  <div class="letuer-square">
                    <div class="square-color-three" />
                    <div
                      style="
                            display: inline-block;
                            color: #f5b923;
                            margin-left: 2px;
                          "
                    >
                      {{ item.unknownEmptyBedsCount }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Container>
  </ContainerGroup>
</template>
<script>
import Container from '../../components/Container.vue'
// import OperationContainer from "../../components/OperationContainer.vue";
import {
  // getEemptyBedsList,
  getEemptyBedsListNew,
  getPatientAreaDTO,
  // getDeptList,
  getDeptListByYard,
  getWardList,
  getHisCwglDeptByAreaCode
} from '../../utils/apis/registrationApi'
export default {
  name: 'Index',
  components: { Container },
  data() {
    return {
      bedStatus: ['1'], // 床位状态
      warploading: true,
      activeName: 'first',
      bedType: '1', // 床位类型
      hospitalDistrict: '1', // 院区
      alldata: [],
      widthStyle: 'width:' + window.screen.width + 'px',
      allRoom: [],
      tableLoading: false,
      dialogVisible: false,
      alldataShui: [],
      drawerVisible: false,
      filterElements: [
        {
          key: 'depet',
          type: 'Select',
          label: '科室',
          value: '',
          options: []
        },
        {
          key: 'inpatient',
          type: 'Select',
          label: '病区',
          value: '',
          options: []
        }
      ],
      buttonList: [
        {
          label: '查询',
          type: 'primary',
          icon: 'search',
          handlerClick: this.getRooms,
          loading: false
        },
        {
          label: '重置',
          type: 'info',
          icon: 'reset',
          handlerClick: this.handlerReset
        }
      ],
      containerHeight: '35px',
      showCloseAndOpen: false,
      openOrCloseText: '展开',
      ruleFormSelect: {
        deptCodeoptions: [],
        nurseCellCodeoptions: [],
        bedStatusoptions: [
          {
            value: '1,2',
            label: '全部'
          },
          {
            value: '1',
            label: '空床'
          },
          {
            value: '2',
            label: '非空床'
          }
        ],
        bedTypeoptions: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '集中'
          },
          {
            value: '0',
            label: '非集中'
          }
        ],
        regionoptions: [
          {
            value: '1',
            label: '三香院区'
          },
          {
            value: '2',
            label: '浒关院区'
          }
        ]
      },
      ruleForm: {
        deptCode: '',
        nurseCellCode: '',
        bedStatus: '1',
        bedType: '1',
        region: ''
      },
      tableData: []
    }
  },
  mounted() {
    this.getRooms()
    this.getDept()
    this.getWard()
    this.tableLoading = true
    setTimeout(() => {
      this.tableLoading = false
    }, 1500)
    this.initShowCloseOrOpen()
    window.addEventListener('resize', this.initShowCloseOrOpen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initShowCloseOrOpen)
  },
  methods: {
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showCloseAndOpen = this.$refs['input-container'].scrollHeight > 35
      }, 50)
    },
    openAndCloseFilterForm() {
      this.containerHeight = this.openOrCloseText === '展开' ? 'auto' : '35px'
      this.openOrCloseText = this.openOrCloseText === '展开' ? '收起' : '展开'
    },
    tabshandleClick() {},
    // 获取病区下拉数据
    getWard() {
      this.ruleForm.nurseCellCode = ''
      this.ruleFormSelect.nurseCellCodeoptions = []
      const parms = {
        yard: this.ruleForm.region
      }
      getWardList(parms).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.nurseCellCodeoptions.push(dats)
          })
        }
      })
    },
    // 获取科室下拉数据
    getDept() {
      this.ruleForm.deptCode = ''
      this.ruleFormSelect.deptCodeoptions = []
      const parms = {
        yard: this.ruleForm.region
      }
      getDeptListByYard(parms).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: '',
            value: ''
          }
          res.data.data.forEach((element) => {
            dats = {
              label: element.deptName,
              value: element.deptCode
            }
            this.ruleFormSelect.deptCodeoptions.push(dats)
          })
        }
      })
    },
    // 根据科室查病区
    deptChange() {
      // this.ruleForm.nurseCellCode = ''
      this.ruleFormSelect.nurseCellCodeoptions = []
      getPatientAreaDTO({ deptCode: this.ruleForm.deptCode, yard: this.ruleForm.region }).then(
        (res) => {
          if (res.data.code === 200) {
            let dats = {
              label: '',
              value: ''
            }
            res.data.data.forEach((element) => {
              dats = {
                label: element.areaName,
                value: element.areaId
              }
              this.ruleFormSelect.nurseCellCodeoptions.push(dats)
            })
          }
        }
      )
      if (this.ruleForm.deptCode === '') {
        this.getDept()
      }
    },
    nurseCellChange() {
      this.ruleFormSelect.deptCodeoptions = []
      if (this.ruleForm.deptCode === '') {
        if (this.ruleForm.nurseCellCode === '') {
          this.getDept()
        } else {
          getHisCwglDeptByAreaCode({ areaCode: this.ruleForm.nurseCellCode, yard: this.ruleForm.region }).then(
            (res) => {
              if (res.data.code === 200) {
                let dats = {
                  label: '',
                  value: ''
                }
                res.data.data.forEach((element) => {
                  dats = {
                    label: element.deptName,
                    value: element.deptCode
                  }
                  this.ruleFormSelect.deptCodeoptions.push(dats)
                })
              }
            }
          )
        }
      }
    },
    // 获取房间
    getRooms(data) {
      this.warploading = true
      this.buttonList[0].loading = true
      const areaCodee = this.ruleForm.nurseCellCode
      const deptCodee = this.ruleForm.deptCode
      let sfkcID = ''
      if (this.bedStatus[0] === '1') {
        // 空床1
        sfkcID = 'b'
      }
      if (this.bedStatus[0] === '2') {
        // 非空 2
        sfkcID = 'a'
      }
      if (this.bedStatus.length === 2) {
        sfkcID = ''
      }
      const parms = {
        areaCode: areaCodee,
        bedState: sfkcID,
        bedType: this.bedType,
        deptCode: deptCodee,
        districtCode: this.hospitalDistrict,
        bedNo: ''
      }
      getEemptyBedsListNew(parms).then((res) => {
        if (res.data.code === 200) {
          this.warploading = false
          this.alldata = []
          res.data.data.forEach((item) => {
            item.classErt = ''
            this.alldata.push(item)
          })
          this.buttonList[0].loading = false
        }
      })
    },
    eimitData(row) {
      console.log(this.ruleForm)
      this.$router.push({
        name: 'RegiStrationfilst',
        params: {
          areaCode: row.areaCode,
          districtCodeList: row.yeadCode,
          name: row.yeadName + row.areaName,
          deptCode: row.deptCode,
          deptName: row.deptName,
          bedStatus: this.bedStatus,
          bedType: [this.bedType]
        },
        query: {
          bedsType: this.ruleForm.bedType,
          areaName: row.areaName,
          deptName: row.deptName,
          yard: this.ruleForm.region
        }
      })
    },
    format(percentage) {
      return percentage === 100 ? '100' : `${percentage}`
    },
    // 院区变化- 请求
    changeHospital() {
      this.getDept()
      this.getWard()
      const state = this.ruleForm.region
      if (state === '1') {
        this.hospitalDistrict = '1'
      } else if (state === '2') {
        this.hospitalDistrict = '2'
      } else {
        this.hospitalDistrict = ''
      }
      this.getRooms()
    },
    // 床位类型变化-请求
    changeBedType(val) {
      // const state = this.ruleForm.bedType
      if (val) {
        this.ruleForm.bedType = val
      } else {
        this.ruleForm.bedType = ''
      }
      this.bedType = this.ruleForm.bedType
      // if (state === '1') {
      //   this.bedType = '1'
      // } else if (state === '0') {
      //   this.bedType = '0'
      // } else if (state === '1,0') {
      //   this.bedType = ''
      // } else {
      //   this.bedType = ''
      // }
      this.getRooms()
      //  1 集中   0 非集中
    },
    // 床位状态变化-请求
    changeBedStatus() {
      const state = this.ruleForm.bedStatus
      if (state === '1') {
        this.bedStatus = ['1']
      } else if (state === '2') {
        this.bedStatus = ['2']
      } else if (state === '1,2') {
        this.bedStatus = ['1', '2']
      } else {
        this.bedStatus = ['1', '2']
      }
      //  1 空床   2 非空
      this.getRooms()
    },
    handleFun() {},

    pageChange(page) {
      console.log(page)
    },
    handlerEidt(row) {
      this.dialogVisible = true
    },
    handlerDetail(row) {
      console.log(row)
      this.drawerVisible = true
    },
    handerSearch(val) {
      console.log(val)
    },
    // 重置
    handlerReset() {
      this.ruleForm = {
        deptCode: '',
        nurseCellCode: '',
        bedStatus: '1',
        bedType: '1',
        region: ''
      }
      this.bedType = '1'
      this.bedStatus = ['1']
      this.hospitalDistrict = '1'
      this.getRooms()
    },
    handlerDelete(row) {
      this.$confirm({
        content: '确定要删除该项吗？',
        title: '确认信息',
        okFn: (res) => {
          console.log(res)
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning('失败了'))
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log('ss')
    },
    drawConfirm() {
      console.log('drawer')
    },
    getSelectionItems(list) {
      console.log(list)
    }
  }
}
</script>
<style lang="less" scoped>
.form-item {
  min-width: 280px;
  height: 28px;
}
.letuer-title {
  padding-left: 10px;
  box-sizing: border-box;
}
.letuer-square {
  margin-right: 7px;
}
.square-color-one,
.square-color-two,
.square-color-three {
  width: 17px;
  height: 17px;
  display: inline-block;
  margin: -3px 0;
}
.square-color-one {
  background-color: #71acfd;
}
.square-color-two {
  background-color: #fc9691;
}
.square-color-three {
  background-color: #e5e5e5;
}
.letuer-content {
  display: flex;
  margin-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}
.ment-details {
  margin-top: 10px;
  font-size: 16px !important;
  display: flex;
}
.progress {
  width: 68%;
  display: inline-block;
}
.ment-content {
  font-size: 16px !important;
  color: #888888;
  text-align: center;
}
.ment-title {
  font-size: 20px;
  font-weight: 600;
  padding: 5px 0;
  color: #555555;
  text-align: center;
}
.department-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: calc(100% - 20px);
  overflow-y: auto;
}
.ment {
  width: 364px;
  height: 160px;
  box-shadow: 0px 3px 3px 0px rgba(33, 101, 249, 0.09);
  margin: 7px 6px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      margin: 3px;
      margin-right: 15px;
      .form-item-label {
        color: #909399;
        text-align: right;
        font-size: 16px;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color:#2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
<style lang="less">
.container-con .el-tabs__content {
  height: 100%;
}
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
</style>
